import {Form, Button, Input, Row, Col, Cascader, DatePicker,InputNumber,Radio  } from 'antd';
import moment from 'moment';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

function query({form, onOk }){

  const {getFieldDecorator,getFieldsValue,resetFields} = form;
  const formItemLayout = {
    // labelCol: { span: 7 },
    wrapperCol: { span: 20 },
    colon:false,
  };
  const submit = () => {
    const values = getFieldsValue();
    values.payerId && (values.payerId = values.payerId[0]),
    onOk(values);

  };

  const reset = () => {
    resetFields();
  }
  return(
    <div   style={{'border':'0px' ,color:'gray','border-style':'none'}}>
    <Form
      onSubmit={submit}
    >
      <Row>
        <Col span={8}>
          <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('billName',)(
                <Input size='large' placeholder='账单信息名称'/>
              )
            }
          </FormItem>
        </Col>
        <Col span={8}>
        <FormItem
            {...formItemLayout}
          >
            {
              getFieldDecorator('payerId', )(
                <Cascader
                 size='large'
                 placeholder='付款方'
                 showSearch
                 style={{marginTop:'6px'}}
                 options={[
                          {value:'1',label:'上海世深'},
                          {value:'2',label:'佩雷罗贸易'},
                          {value:'3',label:'翼汇投资'},

                        ]}
                  />
              )
            }
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem
            wrapperCol={{ span: 14 }}
            labelCol= {{ span: 5 }}
            label='是否有效'
          >
            {
              getFieldDecorator('sex', )(
                <RadioGroup>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </RadioGroup>
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={24} style={{ textAlign: 'right'}}>
          <Button type='primary' icon='search' onClick={submit} style={{ marginRight: 20}}>查 询</Button>
          <Button onClick={reset} style={{ marginRight: 20}}>清 除</Button>
        </Col>
      </Row>
    </Form>
    </div>
  )
}

export default Form.create()(query);
